<template>
    <div class="icons">
        <div class="wrapper">
            <div class="item" v-for="item in iconsList" :key="item.id" @click="selectTo(item.id)">
                <p class="item-img">
                    <img :src="item.img" alt="">
                </p>
                <p class="item-name">
                    {{item.name}}
                </p>
            </div>
            
        </div>
    </div>
</template>

<script>
    export default {
        data:()=>({
            iconsList:[
                { 
                    name:"特色课", 
                    id:1,
                    img:"" 
                },
                { 
                    name:"一对一辅导",
                    id:2,
                    img:"" 
                },
                { 
                    name:"学习日历", 
                    id:3,
                    img:"" 
                },
            ]
        }),
        methods:{
            selectTo(id){
                switch (id) {
                    case 1:
                        this.$emit("toCourse")
                        break;
                    case 2:
                        this.$emit("toOneToOne")
                        break;
                    case 3:
                        this.$emit("toDate")
                        break;
                
                    default:
                        break;
                }
            }
        }
    }
</script>

<style lang="scss" scoped>
.icons{
    width: 100%;
    height: 103px;  
    .wrapper{
        width: 90%;
        height: 103px;
        position: relative;
        margin: 0 auto;
        bottom: 20px;
        display: flex;
        justify-content: space-between;
        .item{
            width: 100px;
            height: inherit;
            background: white;
            border-radius:10px ;
            .item-img{
                text-align: center;
                margin-top: 20px;
                margin-bottom: 10px;
                img{
                    width: 30px;
                    height: 30px;
                }
            }
            .item-name{
                text-align: center;
            }
        }
    }
}
</style>